<html xmlns:javaee="http://java.sun.com/xml/ns/javaee" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
            Overview (JSF 2.1 View Declaration Language: Facelets Variant)
          </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" title="Style">
</head>
<script>
          function asd() {
            parent.document.title="Overview (JSF 2.1 View Declaration Language: Facelets Variant)";
          }
        </script>
<body bgcolor="white" onload="asd();">
<a name="navbar_top"></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td COLSPAN="3" BGCOLOR="#EEEEFF" CLASS="NavBarCell1"><a NAME="navbar_top_firstrow"></a>
<table BORDER="0" CELLPADDING="0" CELLSPACING="3">
<tr ALIGN="center" VALIGN="top">
<td BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev"><font CLASS="NavBarFont1Rev"><b>&nbsp;Overview&nbsp;</b></font></td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"><font CLASS="NavBarFont1">&nbsp;Library&nbsp;</font></td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"><font CLASS="NavBarFont1">&nbsp;Tag&nbsp;</font></td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    &nbsp;<a HREF="help-doc.html"><font CLASS="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
</tr>
</table>
</td><td ALIGN="right" VALIGN="top" ROWSPAN="3"><em></em></td>
</tr>
<tr>
<td BGCOLOR="white" CLASS="NavBarCell2"><font SIZE="-2"></font></td><td BGCOLOR="white" CLASS="NavBarCell2"><font SIZE="-2">
                &nbsp;<a HREF="index.html" TARGET="_top"><b>FRAMES</b></a>&nbsp;
                &nbsp;<a HREF="overview-summary.html" TARGET="_top"><b>NO FRAMES</b></a>&nbsp;
                <script></script>
<noscript>
<a HREF="alltags-noframe.html" TARGET=""><b>All Tags</b></a>
</noscript>
</font></td>
</tr>
</table>
<hr>
<center>
<h2>Tag Library Documentation Generator - Generated Documentation</h2>
</center>
<table BORDER="1" CELLPADDING="3" CELLSPACING="0" CLASS="TagLibraryTable">
<tr BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
<td COLSPAN="2"><font SIZE="+2"><b>Tag Libraries</b></font></td>
</tr>
<tr BGCOLOR="white" valign="top" CLASS="TableRowColor">
<td WIDTH="20%"><b><a href="composite/tld-summary.html">composite</a></b></td><td>
<pre></pre> <div class="changed_added_2_0"> <p>Describes the Facelets2 tag library used for declaring and defining the usage contract for composite UI Components. When authoring a composite component, use of this tag library is largely optional, though always recommended. Declaring and defining a composite component with this taglib provides valuable information about the component that can be used by tools and users of the composite component. In most cases, a composite component can be authored without declaring and defining its usage contract with this taglib. PENDING: the limit of what one can do without declaring and defining a usage contract must be cleary specified and documented. PENDING: The implementation team must help discover these limits. </p> <h2>Creating a Composite Component</h2> <p>The default implementation must support authoring A composite component is declared by creating a Facelets2 file inside of a resource library. (See section JSF.2.6 of the specification prose document for more information about resource libraries.) A composite component must reside within a resource library. It is not possible to create a composite component without putting it inside of a resource library.</p> <p>The default XML namespace URI of the taglib that contains the composite component, for use in <em>the using page</em>, is <code>http://java.sun.com/jsf/composite/&lt;composite-library-name&gt;</code>, where <code>&lt;composite-library-name&gt;</code> is the name of the resource library. For example:</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br /> &lt;html xmlns="http://www.w3.org/1999/xhtml"<br /> xmlns:h="http://java.sun.com/jsf/html"<br /> xmlns:f="http://java.sun.com/jsf/core"<br /> xmlns:ui="http://java.sun.com/jsf/facelets"<br /> xmlns:ez="<i>http://java.sun.com/jsf/composite/<b>ezcomp</b></i>"&gt;<br /> ...<br /> </code></pre> <p>This declares that any Facelets2 file in the resource library called <code>ezcomp</code> can be used as a regular JSF UI component in a view with the above namespace declaration by using the "<code>ez</code>" prefix. For example, placing a file called <code>foo.xhtml</code> in a resource library called <code>ezcomp</code> would make that file accessible like this.</p> <pre><code> &lt;ez:foo /&gt; </code></pre> <p>The implementation must also support declaring the namespace of the tag library in a JSF VDL tag library descriptor. This descriptor file is optional and is useful for component vendors that do not want to use the default XML namespace. This version of the proposal currently uses the facelet taglib descriptor syntax. For example: </p> <pre><code> &lt;facelet-taglib&gt;<br /> &lt;namespace&gt;http://domain.com/path&lt;/namespace&gt; <br /> &lt;composite-library-name&gt;compositeTest&lt;/composite-library-name&gt; <br /> &lt;/facelet-taglib&gt; <br /> </code></pre> <p>Components from that taglibrary may be used in a using page by declaring them in the XML namespace for that view:</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br /> &lt;html xmlns="http://www.w3.org/1999/xhtml"<br /> xmlns:h="http://java.sun.com/jsf/html"<br /> xmlns:f="http://java.sun.com/jsf/core"<br /> xmlns:ui="http://java.sun.com/jsf/facelets"<br /> xmlns:ez="<i><b>http://domain.com/path/namespace</b></i>"&gt;<br /> ...<br /> </code></pre> <p><a name="composite_example">Below is an example of a fairly involved composite component declaration. Such a declaration might appear in <code>foo.xhtml</code>.</a></p> <div class="syntax"><div class="html4strict" style="font-family: monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<a href="interface.html">composite:interface</a> <span class="kw3">name</span>=<span class="st0">&quot;foo&quot;</span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;displayName=<span class="st0">&quot;Very Simple Login Panel&quot;</span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;preferred=<span class="st0">&quot;true&quot;</span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;expert=<span class="st0">&quot;false&quot;</span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;shortDescription=<span class="st0">&quot;An illustration of the composite component feature&quot;</span><span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; <span class="sc2">&lt;<a href="attribute.html">composite:attribute</a> <span class="kw3">name</span>=<span class="st0">&quot;model&quot;</span> required=<span class="st0">&quot;true&quot;</span><span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc2">&lt;composite:attribute <span class="kw3">name</span>=<span class="st0">&quot;loginAction&quot;</span> required=<span class="st0">&quot;true&quot;</span> method-signature=<span class="st0">&quot;java.lang.Object action()&quot;</span>/ <span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; <span class="sc2"><span class="kw2">&lt;</span>/composite:attribute&gt;</span></div></li> <li class="li1"><div class="de1">&nbsp; <span class="sc2">&lt;composite:attribute <span class="kw3">name</span>=<span class="st0">&quot;valueChangeListener&quot;</span> targets=<span class="st0">&quot;username&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; <span class="sc2">&lt;composite:attribute <span class="kw3">name</span>=<span class="st0">&quot;specialMethodExpression&quot;</span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;method-signature=<span class="st0">&quot;com.foo.User validateCurrentUser()&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; <span class="sc2">&lt;composite:attribute <span class="kw3">name</span>=<span class="st0">&quot;loginButtonLabel&quot;</span> default=<span class="st0">&quot;Login&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; <span class="sc2">&lt;<a href="editableValueHolder.html">composite:editableValueHolder</a> <span class="kw3">name</span>=<span class="st0">&quot;username&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; <span class="sc2">&lt;composite:actionSource <span class="kw3">name</span>=<span class="st0">&quot;loginEvent&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; <span class="sc2">&lt;composite:actionSource <span class="kw3">name</span>=<span class="st0">&quot;cancelEvent&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; <span class="sc2">&lt;composite:actionSource <span class="kw3">name</span>=<span class="st0">&quot;allEvents&quot;</span> targets=<span class="st0">&quot;loginEvent cancelEvent&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1"><span class="sc2"><span class="kw2">&lt;</span>/composite:interface&gt;</span></div></li> <li class="li2"><div class="de2"><span class="sc2">&lt;<a href="implementation.html">composite:implementation</a> <span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; <span class="sc2">&lt;ui:decorate template=<span class="st0">&quot;fooTemplate.xhtml&quot;</span><span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc2">&lt;ui:define <span class="kw3">name</span>=<span class="st0">&quot;header&quot;</span><span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;p&gt;</span></span>This is the login panel header<span class="sc2"><span class="kw2">&lt;/p&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;</span>/ui:define&gt;</span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc2">&lt;ui:define <span class="kw3">name</span>=<span class="st0">&quot;body&quot;</span><span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;p&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="sc2">&lt;h:inputText <span class="kw3">id</span>=<span class="st0">&quot;username&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/p&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;p&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;h:commandButton <span class="kw3">id</span>=<span class="st0">&quot;loginEvent&quot;</span> </div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="kw3">value</span>=<span class="st0">&quot;#{cc.attrs.loginButtonLabel}&quot;</span><span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;</span>/h:commandButton&gt;</span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;h:commandButton <span class="kw3">id</span>=<span class="st0">&quot;cancelEvent&quot;</span> <span class="kw3">value</span>=<span class="st0">&quot;Cancel&quot;</span> <span class="kw3">action</span>=<span class="st0">&quot;cancel&quot;</span><span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;</span>/h:commandButton&gt;</span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;special:validateUserButton </div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; validateUser=<span class="st0">&quot;#{cc.attrs.specialMethodExpression}&quot;</span> /<span class="kw2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;/p&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;</span>/ui:define&gt;</span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc2">&lt;ui:define <span class="kw3">name</span>=<span class="st0">&quot;footer&quot;</span><span class="kw2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp;<span class="sc2"><span class="kw2">&lt;p&gt;</span></span>This is the login panel footer<span class="sc2"><span class="kw2">&lt;/p&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc2"><span class="kw2">&lt;</span>/ui:define&gt;</span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; <span class="sc2"><span class="kw2">&lt;</span>/ui:decorate&gt;</span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1"><span class="sc2"><span class="kw2">&lt;</span>/composite:implementation&gt;</span> </div></li></ol></div></div> <p>The values for attributes in a composite component VDL file can be fully localized by putting them inside a ResourceBundle in the same directory as the VDL view and accessing them with the per-component resource bundle syntax. Consider the file <code>foo.xhtml</code>, in the resource library <code>ezcomp</code>. The <code>shortDescription</code> element could be changed to be:</p> <pre><code> &lt;composite:interface shortDescription="#{cc.resourceBundleMap.shortDescription}" &gt; </code></pre> <p>In this case, In the same <code>ezcomp</code> directory as <code>foo.xhtml</code>, there would be a <code>foo.properties</code> file that would contain this entry:</p> <pre><code> shortDescription=A really nifty login panel. </code></pre> <p>The normal localization rules for <code>ResourceBundle</code> would apply.</p> <p>Refer to the <code>composite</code> tag for the details of defining the <code>interface</code> and <code>implementation</code> for composite components.</p> </div> <pre></pre>
</td>
</tr>
<tr BGCOLOR="white" valign="top" CLASS="TableRowColor">
<td WIDTH="20%"><b><a href="f/tld-summary.html">f</a></b></td><td>
<pre>The core JavaServer Faces custom actions that are independent of any particular RenderKit.</pre>
</td>
</tr>
<tr BGCOLOR="white" valign="top" CLASS="TableRowColor">
<td WIDTH="20%"><b><a href="h/tld-summary.html">h</a></b></td><td>
<pre>This tag library contains JavaServer Faces component tags for all UIComponent + HTML RenderKit Renderer combinations defined in the JavaServer Faces Specification.</pre>
</td>
</tr>
<tr BGCOLOR="white" valign="top" CLASS="TableRowColor">
<td WIDTH="20%"><b><a href="c/tld-summary.html">JSTL core</a></b></td><td>
<pre><p>JSTL 1.2 core library</p> <p class="changed_modified_2_0_rev_a">The pre JSF 2.0 version of Facelets incorrectly declared the taglib uri to be <code>http://java.sun.com/jstl/core</code>. For backwards compatibility implementations must correctly handle inclusions with the incorrect uri, and the correct uri, declared here.</p></pre>
</td>
</tr>
<tr BGCOLOR="white" valign="top" CLASS="TableRowColor">
<td WIDTH="20%"><b><a href="fn/tld-summary.html">JSTL functions</a></b></td><td>
<pre>JSTL 1.1 functions library</pre>
</td>
</tr>
<tr BGCOLOR="white" valign="top" CLASS="TableRowColor">
<td WIDTH="20%"><b><a href="ui/tld-summary.html">ui</a></b></td><td>
<pre></pre> <div class="changed_added_2_0"> <p>The tags in this library add templating&#8212;a powerful view composition technique&#8212;to JSF. Templating is so useful that there are entire frameworks, such as Tiles and SiteMesh, that are built around the concept of templating. So what is templating, how can you benefit from it, and how does this tag library implement it? </p> <p>If you've used JSP before, you've probably used <code>jsp:include</code>. The prototypical example for <code>jsp:include</code> is a header on each page in a web application. One JSP page, say header.jsp, encapsulates the header content, and the header is included by each page. You <em>encapsulate and reuse content</em>, so that changes to one file, header.jsp, affect the header on every page. </p> <p>This tab library contains a tag&#8212<code>ui:include</code>&#8212 that's analagous to <code>jsp:include</code>, but encapsulating and reusing content is only half the templating story, because templating also lets you <em>encapsulate and reuse <b>layout</b></em>. You define a single <em>template</em> (meaning layout), and you reuse that template with multiple <em>compositions</em>. So now you can control the layout of many pages with a single template (layout). Let's take a look at an example. </p> <h3>A Templating Example</h3> <p> First, we define a template: </p> <div class="syntax"><div class="html4strict" style="font-family: monospace;"><ol><li class="li1"><div class="de1"><span class="sc0">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1">&lt;html</span> <span class="re0">xmlns</span>=<span class="st0">&quot;http://www.w3.org/1999/xhtml&quot;</span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xmlns:<span class="re0">ui</span>=<span class="st0">&quot;http://java.sun.com/jsf/facelets&quot;</span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;head<span class="re2">&gt;</span></span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;link</span> <span class="re0">href</span>=<span class="st0">&quot;styles.css&quot;</span> <span class="re0">rel</span>=<span class="st0">&quot;stylesheet&quot;</span> <span class="re0">type</span>=<span class="st0">&quot;text/css&quot;</span><span class="re2">/&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;title<span class="re2">&gt;</span></span></span><span class="sc3"><span class="re1">&lt;ui</span>:insert <span class="re0">name</span>=<span class="st0">&quot;title&quot;</span><span class="re2">&gt;</span></span>Default Title<span class="sc3"><span class="re1">&lt;/ui</span>:insert<span class="re2">&gt;</span></span><span class="sc3"><span class="re1">&lt;/title<span class="re2">&gt;</span></span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/head<span class="re2">&gt;</span></span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;body<span class="re2">&gt;</span></span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:debug<span class="re2">/&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;div</span> <span class="re0">class</span>=<span class="st0">&quot;heading&quot;</span><span class="re2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:insert <span class="re0">name</span>=<span class="st0">&quot;heading&quot;</span><span class="re2">/&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/div<span class="re2">&gt;</span></span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;div</span> <span class="re0">class</span>=<span class="st0">&quot;content&quot;</span><span class="re2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:insert <span class="re0">name</span>=<span class="st0">&quot;content&quot;</span><span class="re2">/&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/div<span class="re2">&gt;</span></span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/body<span class="re2">&gt;</span></span></span></div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1">&lt;/html<span class="re2">&gt;</span></span></span> </div></li></ol></div></div> <p> In the preceeding listing, we've defined a layout, also known as a template. That template uses the <code>ui:insert</code> tag to insert pieces of a page &#8212namely, title, heading, and content&#8212 defined in a <em>composition</em>. Notice that on line 8, we define a default title, in case one isn't provided by the composition. Also note that on line 12 we have the <code>ui:debug</code> tag, which lets the user activate a popup window with debugging information by typing CTRL + Shift + d. </p> <p> The title, heading, and content pieces of the page referenced in the template are defined in a separate XHTML file in a composition, like this: </p> <div class="syntax"><div class="html4strict" style="font-family: monospace;"><ol><li class="li1"><div class="de1"><span class="sc0">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1">&lt;html</span> <span class="re0">xmlns</span>=<span class="st0">&quot;http://www.w3.org/1999/xhtml&quot;</span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp;xmlns:<span class="re0">ui</span>=<span class="st0">&quot;http://java.sun.com/jsf/facelets&quot;</span><span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; <span class="sc3"><span class="re1">&lt;body<span class="re2">&gt;</span></span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:composition <span class="re0">template</span>=<span class="st0">&quot;/layout.xhtml&quot;</span><span class="re2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:define <span class="re0">name</span>=<span class="st0">&quot;title&quot;</span><span class="re2">&gt;</span></span>A List of Contacts<span class="sc3"><span class="re1">&lt;/ui</span>:define<span class="re2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:define <span class="re0">name</span>=<span class="st0">&quot;heading&quot;</span><span class="re2">&gt;</span></span>Contacts<span class="sc3"><span class="re1">&lt;/ui</span>:define<span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:define <span class="re0">name</span>=<span class="st0">&quot;content&quot;</span><span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:include <span class="re0">src</span>=<span class="st0">&quot;contactsTable.xhtml&quot;</span> <span class="re2">/&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/ui</span>:define<span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/ui</span>:composition<span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; <span class="sc3"><span class="re1">&lt;/body<span class="re2">&gt;</span></span></span></div></li> <li class="li1"><div class="de1"><span class="sc3"><span class="re1">&lt;/html<span class="re2">&gt;</span></span></span> </div></li></ol></div></div> <p> At runtime, JSF synthesizes the two previous XHTML pages to create a single JSF view by inserting the pieces defined in the composition into the template (that template is layout.xhtml, which is the first listing above). JSF also disregards everything outside of the <code>composition</code> tag so that we don't wind up with two <code>body</code> elements in the view. Also, note that we use the <code>ui:include</code> tag on line 14 to include content (which happens to be a table) from another XHTML page, so that we can reuse that table in other views. </p> <p> So why do we have two XHTML pages to define a single view? Why not simply take the pieces and manually insert them into the layout so that we have only a single XHTML page? The answer is simple: we have separated layout from the content so that we can <em>reuse that layout</em> among multiple compositions. For example, now we can define another composition that uses the same layout: </p> <div class="syntax"><div class="html4strict" style="font-family: monospace;"><ol><li class="li1"><div class="de1"><span class="sc0">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span></div></li> <li class="li1"><div class="de1">&nbsp;</div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1">&lt;html</span> <span class="re0">xmlns</span>=<span class="st0">&quot;http://www.w3.org/1999/xhtml&quot;</span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; xmlns:<span class="re0">ui</span>=<span class="st0">&quot;http://java.sun.com/jsf/facelets&quot;</span><span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; <span class="sc3"><span class="re1">&lt;body<span class="re2">&gt;</span></span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:composition <span class="re0">template</span>=<span class="st0">&quot;/layout.xhtml&quot;</span><span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:define <span class="re0">name</span>=<span class="st0">&quot;title&quot;</span><span class="re2">&gt;</span></span>Create a Contact<span class="sc3"><span class="re1">&lt;/ui</span>:define<span class="re2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:define <span class="re0">name</span>=<span class="st0">&quot;heading&quot;</span><span class="re2">&gt;</span></span>Create Contact&lt;/ui</span>:define<span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:define <span class="re0">name</span>=<span class="st0">&quot;content&quot;</span><span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;ui</span>:include <span class="re0">src</span>=<span class="st0">&quot;createContactForm.xhtml&quot;</span><span class="re2">/&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/ui</span>:define<span class="re2">&gt;</span></span></div></li> <li class="li2"><div class="de2">&nbsp;</div></li> <li class="li2"><div class="de2">&nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/ui</span>:composition<span class="re2">&gt;</span></span></div></li> <li class="li1"><div class="de1">&nbsp; <span class="sc3"><span class="re1">&lt;/body<span class="re2">&gt;</span></span></span></div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1">&lt;/html<span class="re2">&gt;</span></span></span> </div></li></ol></div></div> <p> By encapsulating the layout, we can reuse that layout among multiple compositions. Just like <code>ui:include</code> lets us encapsulate and reuse conent, JSF compositions let us encapsulate and reuse layout, so that changes to a single layout can affect multiple views. Fundamentally, that's what this tag library is all about. </p> </div> <pre></pre>
</td>
</tr>
</table>
<p></p>
<hr>
<a name="navbar_bottom"></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td COLSPAN="3" BGCOLOR="#EEEEFF" CLASS="NavBarCell1"><a NAME="navbar_bottom_firstrow"></a>
<table BORDER="0" CELLPADDING="0" CELLSPACING="3">
<tr ALIGN="center" VALIGN="top">
<td BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev"><font CLASS="NavBarFont1Rev"><b>&nbsp;Overview&nbsp;</b></font></td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"><font CLASS="NavBarFont1">&nbsp;Library&nbsp;</font></td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"><font CLASS="NavBarFont1">&nbsp;Tag&nbsp;</font></td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    &nbsp;<a HREF="help-doc.html"><font CLASS="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
</tr>
</table>
</td><td ALIGN="right" VALIGN="top" ROWSPAN="3"><em></em></td>
</tr>
<tr>
<td BGCOLOR="white" CLASS="NavBarCell2"><font SIZE="-2"></font></td><td BGCOLOR="white" CLASS="NavBarCell2"><font SIZE="-2">
                &nbsp;<a HREF="index.html" TARGET="_top"><b>FRAMES</b></a>&nbsp;
                &nbsp;<a HREF="overview-summary.html" TARGET="_top"><b>NO FRAMES</b></a>&nbsp;
                <script></script>
<noscript>
<a HREF="alltags-noframe.html" TARGET=""><b>All Tags</b></a>
</noscript>
</font></td>
</tr>
</table>
<hr>
<small><i>
          Output Generated by 
          <a href="http://taglibrarydoc.dev.java.net/" target="_blank">Tag Library Documentation Generator</a>.
          </i></small>
</body>
</html>
